<template>
  <div class="box">
    <div class="top">
      <van-nav-bar
        :title="titleval"
        left-text=" "
        left-arrow
        @click-left="onClickLeft"
      />
      <van-row>
        <van-col span="6"><img :src="src" alt="" /></van-col>
        <van-col span="16">{{ userNickname }}</van-col>
        <van-col span="2"><van-icon name="discount" /></van-col>
      </van-row>
    </div>
    <div class="mian">
      <div class="iconbox">
        <div class="topic">
          <ul>
            <li>商品收藏</li>
            <li>店铺收藏</li>
            <li>我的足迹</li>
          </ul>
        </div>
        <van-grid :column-num="4">
          <van-grid-item icon="idcard" text="代付款" />
          <van-grid-item icon="cash-on-deliver" text="代收货" />
          <van-grid-item icon="records" text="退换/售后" />
          <van-grid-item icon="certificate" text="全部订单" />
        </van-grid>
      </div>
      <div class="title">
        <van-grid :column-num="4">
          <van-grid-item icon="idcard" text="修改密码" @click="onpassword" />
          <van-grid-item icon="font-o" text="个人信息" @click="showPopup" />
          <van-grid-item icon="refund-o" text="退出登录" @click="onclick" />
          <van-grid-item icon="balance-o" text="已付款" />
        </van-grid>
        <van-popup v-model="show">内容{{ mymain }}</van-popup>
        <van-popup v-model="mmshow">
          <van-form @submit="onSubmit">
            <van-field
              v-model="username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="oldpassword"
              type="password"
              name="老密码"
              label="老密码"
              placeholder="老密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <van-field
              v-model="newpassword"
              type="password"
              name="新密码"
              label="新密码"
              placeholder="新密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Dialog ,Toast} from "vant";
import { postMM, GetMine } from "../request/api";
// 全局注册
Vue.use(Dialog);
Vue.use(Toast);
export default {
  data() {
    return {
      titleval: "我的世界",
      isShowLoginPopup: false,
      username: "sad",
      oldpassword: "",
      newpassword: "",
      userNickname: "nicheng",
      logIcon: "arrow",
      isShowDialog: false,
      inter: "",
      mymain: [],
      password: "",
      show: false,
      mmshow: false,
      src: "https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      console.log(this.newpassword);
      postMM({
        token: localStorage.getItem("token"),
        userid: localStorage.getItem("userid"),
        oldpassword: this.oldpassword,
        newpassword: this.newpassword,
      }).then((res) => {
        console.log(res);
        Toast(res.data);
        this.mmshow=false
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onclick() {
      Dialog.confirm({
        title: "退出登录",
        message: "确认退出登录",
      })
        .then(() => {
          console.log("确定");
          localStorage.removeItem("token");
          location.reload();
        })
        .catch(() => {
          console.log("取消");
        });
    },
    onchange() {
      console.log("1");
    },
    showPopup() {
      console.log();
      this.show = true;
      console.log(localStorage.getItem("token"));
      console.log(localStorage.getItem("userid"));
      GetMine({
        token: localStorage.getItem("token"),
        userid: localStorage.getItem("userid"),
      }).then((res) => {
        console.log(res.data);
        this.mymain = res.data;
      });
    },
    ondianji() {
      GetMine().then((res) => {
        console.log(res.data);
      });
    },
    onpassword() {
      this.mmshow = true;
    },
    toShowDialog() {},
    toShowLoginPopup() {},
  },
};
</script>

<style scoped>
#app .box .top {
  height: 1.5rem;
}
.van-row {
  height: 1.2rem;
  padding: 0.2rem 0.1rem;
  background-color: rgb(253, 241, 247);
  font-size: 0.3rem;
}
#app .box .top .van-icon-discount {
  right: 0.2rem;
  bottom: -0.3rem;
}
img {
  width: 0.7rem;
  display: block;
  border-radius: 50%;
}
#app .box .mian {
  padding: 0.2rem 0.2rem;
  background-color: rgb(245, 245, 245);
}
#app .box .mian .iconbox {
  height: 1.5rem;
  background-color: #fff;
}
#app .box .mian .iconbox .topic ul {
  background-color: rgb(249, 249, 249);
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.12rem;
  height: 0.3rem;
  line-height: 4.8px;
  border: 0.0625rem solid grays;
}
</style>